<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后勤人员管理</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<link rel="stylesheet" href="css/apaltment.css">
<link rel="stylesheet" href="css/jquery.sPage.css">
<link rel="stylesheet" href="css/jquery.sPage.green.css">
<link rel="stylesheet" href="css/jquery.sPage.red.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
.loading{
	width:200px;
	margin-left:45%;
}
    	.num{
            height: 50px;
    		line-height: 50px;
    		text-align: center;
    	}
    	.demo{
            margin-bottom: 20px;
            text-align: center;
        }
        /*租户详情页*/
		.xiangqing{
			width:100%;
			height:40px;
			background:floralwhite;
			margin:0 auto;
		}
		.modal-header{
			background:skyblue !important;
			color:saddlebrown !important;
		}
		.xiangqing:nth-child(2n){
			background:white !important;
		}
		.xiangqing div{
			height:40px;
			font-size:16px;
			line-height:40px;
		}
		.xiang_left{
			text-align:center;
			width:30% !important;
			float:left !important;
		}
		.xiang_right{
			text-align:left;
			width:70% !important;
			float:right !important;
		}
    </style>
</head>
<body>
<div class="search">
		
        <form action="">
        <span onclick="chooseDongtai()" class="btn btn-primary" style="margin-right:10px" data-toggle='modal' data-target='#add'>添加</span>
            <label>
                <span>员工姓名：</span>
                <input type="text" id="l_name2" placeholder="输入员工姓名">
            </label>
            <label>
                <span>手机号：</span>
                <input type="text" id="l_phone2" placeholder="输入手机号">
            </label>
            
            <button type="button" id="searchLogistics" style="margin-left: 25px" class="btn btn-primary">查询</button>
        </form>
    </div>
<table class="table table-bordered" style="margin-top: 20px;">
    
    <thead>
        <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
            <th>现住址</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="msg">
        
    </tbody>
</table>
 <img class="noneData" style="display:none" src="images/dataNone.png">
<img class="loading" src="images/loading.gif">
<div id="myPage" class="demo"></div>
    
<!-- 修改 -->
<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                    <input type="text" id="t_id" hidden>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">工号：</label>
                            <div class="col-sm-10">
                                <input id="l_jobnumber" type="text" class="form-control" placeholder="请输入工号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">姓名：</label>
                            <div class="col-sm-10">
                                <input id="l_name" type="text" class="form-control" placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">性别：</label>
                            <div class="col-sm-10">
                            <select id="l_gender" class="form-control">
                            	<option value="男">男</option>
                            	<option value="女">女</option>
                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">年龄：</label>
                            <div class="col-sm-10">
                                <input id="l_age" type="text" class="form-control" placeholder="请输入年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">电话：</label>
                            <div class="col-sm-10">
                                <input id="l_phone" type="text" class="form-control" placeholder="请输入电话">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">身份证：</label>
                            <div class="col-sm-10">
                                <input id="l_number" type="text" class="form-control" placeholder="请输入身份证">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">现住址：</label>
                            <div class="col-sm-10">
                                <input id="l_address" type="text" class="form-control" placeholder="请输入现住址">
                            </div>
                        </div>
                        <input type="text" id="l_id" hidden>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="updateLogistics" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
    
    <!-- 添加 -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                    <input type="text" id="t_id" hidden>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">工号：</label>
                            <div class="col-sm-10">
                                <input id="l_jobnumber1" type="text" class="form-control" placeholder="请输入工号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">姓名：</label>
                            <div class="col-sm-10">
                                <input id="l_name1" type="text" class="form-control" placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">性别：</label>
                            <div class="col-sm-10">
                            <select id="l_gender1" class="form-control">
                            	<option value="男">男</option>
                            	<option value="女">女</option>
                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">年龄：</label>
                            <div class="col-sm-10">
                                <input id="l_age1" type="text" class="form-control" placeholder="请输入年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">电话：</label>
                            <div class="col-sm-10">
                                <input id="l_phone1" type="text" class="form-control" placeholder="请输入电话">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">身份证：</label>
                            <div class="col-sm-10">
                                <input id="l_number1" type="text" class="form-control" placeholder="请输入身份证">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">现住址：</label>
                            <div class="col-sm-10">
                                <input id="l_address1" type="text" class="form-control" placeholder="请输入现住址">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="addLogistics" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
<!-- 详情 -->
<div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        详情信息
                    </h4>
                </div>
                <div class="modal-body" style="overflow:hidden">
					<div class="xiangqing">
						<div class="xiang_left">工号：</div>
   						<div class="xiang_right l_jobnumber"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">姓名：</div>
   						<div class="xiang_right l_name"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">性别：</div>
   						<div class="xiang_right l_gender"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">年龄：</div>
   						<div class="xiang_right l_age"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">电话：</div>
   						<div class="xiang_right l_phone"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">身份证号：</div>
   						<div class="xiang_right l_number"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">现住址：</div>
   						<div class="xiang_right l_address"></div>
					</div>
					
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
</body>
<script src="js/jquery.sPage.js"></script>
<script>
$(function(){
    ajaxPage(1);
});

function ajaxPage(page){
	$.ajax({
		url:"showLogisticsServlet",
		dataType:"JSON",
		type:"post",
		data:{pageNum:page},
		success:function(data){
			console.log(data)
			var sum=data["Count"]
			$(".loading").css({"display":"none"})
			var msg = ""
				
			delete data["Count"]
			delete data["pageCount"]
			$.each(data,function(i,item){
				msg += "<tr>"+
				"<td>"+item["l_jobnumber"]+"</td>"+
				"<td>"+item["l_name"]+"</td>"+
				"<td>"+item["l_gender"]+"</td>"+
				"<td>"+item["l_phone"]+"</td>"+
				"<td>"+item["l_address"]+"</td>"+
				"<td>"+
					"<span onclick='getDetail("+item['l_id']+")' class='btn btn-info' data-toggle='modal' data-target='#update'>修改</span>"+
					"<span onclick='getDetail("+item['l_id']+")' class='btn btn-success' data-toggle='modal' data-target='#detail'>详情</span>"+
					"<span onclick='deleteById("+item['l_id']+")' class='btn btn-danger'>删除</span>"+
				"</td>"+
			"</tr>"
			})
			$("#msg").html(msg)
			if(sum==0){
				$(".noneData").css({display:"block"})
			}
			$("#myPage").unbind();
			$("#myPage").sPage({
		        page:page,//当前页码，必填
		        total:sum,//数据总条数，必填
		        pageSize:10,//每页显示多少条数据，默认10条
		        showTotal:true,//是否显示总条数，默认关闭：false
		        totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
		        noData: false,//有数据时是否显示分页，默认false不显示，true显示第一页
		        showSkip:false,//是否显示跳页，默认关闭：false
		        showPN:true,//是否显示上下翻页，默认开启：true
		        prevPage:"上一页",//上翻页文字描述，默认“上一页”
		        nextPage:"下一页",//下翻页文字描述，默认“下一页”
		        fastForward: 5,//快进快退页数，默认0表示不开启快进快退
		        backFun:function(page){
		        	//点击分页按钮回调函数，返回当前页码
		            ajaxPage(page)
		            $("#msg").html("")
		            $(".loading").css({"display":"block"})
		        }
		    });
		},
		error:function(err){
			
		}
	})
}
//详情页
function getDetail(l_id){
	console.log(l_id)
	$.ajax({
		url:"showLogisticsDataByIDServlet",
		dataType:"JSON",
		type:"post",
		data:{l_id:l_id},
		success:function(data){
			console.log(data)
			$.each(data,function(i,item){
				$(".l_jobnumber").html(data["l_jobnumber"])
				$(".l_name").html(data["l_name"])
				$(".l_gender").html(data["l_gender"])
				$(".l_age").html(data["l_age"])
				$(".l_phone").html(data["l_phone"])
				$(".l_number").html(data["l_number"])
				$(".l_address").html(data["l_address"])
				
				$("#l_id").val(data["l_id"])
				$("#l_jobnumber").val(data["l_jobnumber"])
				$("#l_name").val(data["l_name"])
				$("#l_gender").val(data["l_gender"])
				$("#l_age").val(data["l_age"])
				$("#l_phone").val(data["l_phone"])
				$("#l_number").val(data["l_number"])
				$("#l_address").val(data["l_address"])
			})
		},
		error:function(err){
			console.log("请求失败")
			console.log(err)
		}
	})
}

//修改数据
$("#updateLogistics").click(function(){
	$.ajax({
		url:"alterLogisticsDataByIdServlet",
		dataType:"JSON",
		type:"post",
		data:{
			"l_id":$("#l_id").val()	,
			"l_jobnumber":$("#l_jobnumber").val(),
			"l_name":$("#l_name").val(),
			"l_age":$("#l_age").val(),
			"l_gender":$("#l_gender").val(),
			"l_phone":$("#l_phone").val(),
			"l_number":$("#l_number").val(),
			"l_address":$("#l_address").val(),
		},
		success:function(data){
			alert("修改成功")
			window.location.reload()
		}
	})
})

//删除数据
function deleteById(l_id){
	if(confirm("确定删除吗？")){
		$.ajax({
			url:"deleteLogisticsDataByIdServlet",
			dataType:"JSON",
			type:"post",
			data:{
				"l_id":l_id,
			},
			success:function(data){
				alert("删除成功")
				window.location.reload()
			}
		})
	}else{
		return
	}
}

//添加数据
function chooseDongtai(){
	console.log("sdasd")
	$("#addLogistics").click(function(){
		$.ajax({
			url:"addLogisticsDataServlet",
			dataType:"JSON",
			type:"post",
			data:{
				"l_jobnumber":$("#l_jobnumber1").val(),
				"l_name":$("#l_name1").val(),
				"l_age":$("#l_age1").val(),
				"l_gender":$("#l_gender1").val(),
				"l_phone":$("#l_phone1").val(),
				"l_number":$("#l_number1").val(),
				"l_address":$("#l_address1").val(),
			},
			success:function(data){
				alert("添加成功")
				window.location.reload()
			}
		})
	})
	
}

//条件查询

$("#searchLogistics").click(function(){
	$("#msg").html("")
	$(".loading").css({"display":"block"})
	$(".noneData").css({display:"none"})
	search(1)
})
function search(page){
	$.ajax({
		url:"showLogisticsByConditionServlet",
		dataType:"JSON",
		type:"post",
		data:{
			"l_name":$("#l_name2").val(),
			"l_phone":$("#l_phone2").val(),
			"pageNum":page
		},
		success:function(data){
			console.log(data)
			var sum=data["Count"]
			$(".loading").css({"display":"none"})
			var msg = ""
				
			delete data["Count"]
			delete data["pageCount"]
			$.each(data,function(i,item){
				msg += "<tr>"+
				"<td>"+item["l_jobnumber"]+"</td>"+
				"<td>"+item["l_name"]+"</td>"+
				"<td>"+item["l_gender"]+"</td>"+
				"<td>"+item["l_phone"]+"</td>"+
				"<td>"+item["l_address"]+"</td>"+
				"<td>"+
					"<span onclick='getDetail("+item['l_id']+")' class='btn btn-info' data-toggle='modal' data-target='#update'>修改</span>"+
					"<span onclick='getDetail("+item['l_id']+")' class='btn btn-success' data-toggle='modal' data-target='#detail'>详情</span>"+
					"<span onclick='deleteById("+item['l_id']+")' class='btn btn-danger'>删除</span>"+
				"</td>"+
			"</tr>"
			})
			$("#msg").html(msg)
			if(sum==0){
				$(".noneData").css({display:"block"})
			}
			$("#myPage").unbind();
			$("#myPage").sPage({
		        page:page,//当前页码，必填
		        total:sum,//数据总条数，必填
		        pageSize:10,//每页显示多少条数据，默认10条
		        showTotal:true,//是否显示总条数，默认关闭：false
		        totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
		        noData: false,//有数据时是否显示分页，默认false不显示，true显示第一页
		        showSkip:false,//是否显示跳页，默认关闭：false
		        showPN:true,//是否显示上下翻页，默认开启：true
		        prevPage:"上一页",//上翻页文字描述，默认“上一页”
		        nextPage:"下一页",//下翻页文字描述，默认“下一页”
		        fastForward: 5,//快进快退页数，默认0表示不开启快进快退
		        backFun:function(page){
		        	//点击分页按钮回调函数，返回当前页码
		            search(page)
		            $("#msg").html("")
		            $(".loading").css({"display":"block"})
		        }
		    });
		}
	})
}
</script>
</html>